<template>
  <div>
    <h2><img :src="sectionImg" alt=""></h2>
    <ul class="flexbox-scroll">
      <li v-for="(item,index) in list" :key="index" class="flexbox-scroll-item">
        <router-link :to="item.href">
          <img :src="item.img">
          <p class="title clamp"> {{item.title}}</p>
          <p class="price">¥{{item.price}}</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['sectionImg','list']
}  
</script>

<style lang="less" scoped>
h2 {
  padding-top: 0.2rem;
  img { width:100% }
}

.flexbox-scroll-item {
  .title {
    margin: 0.12rem 0 0.08rem;
    height: 32px;
    line-height: 16px;
  }
  .price{
    font-size: 14px;
    color: #e73c3c;
  }
}
</style>
